<template>
  <div class="contain">
    <div class="header">
      <el-button type="info text" @click="addClass('dish')"
        >+ 新增菜品分类</el-button
      >
      <el-button type="warning text" @click="addClass('meal')"
        >+ 新增套餐分类</el-button
      >
      <el-dialog
        :title="form.title"
        :visible.sync="dialogFormVisible"
        width="550px"
      >
        <el-form :model="form" style="text-align: right">
          <el-form-item label="分类名称:">
            <el-input
              v-model="form.name"
              style="width: 400px"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="排序:">
            <el-input
              v-model="form.sort"
              style="width: 400px"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="warning" @click="submitForm()">确 定</el-button>
          <el-button type="info" @click="submitForm('go')"
            >保存并继续添加</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div class="body">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="name" label="分类名称" width="180" />
        <el-table-column prop="type" label="分类类型" width="180">
          <template v-slot="{ row }">
            {{ row.type === 1 ? "菜品名称" : "套餐名称" }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="操作时间" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-link type="primary" @click="handleEdit(row)">修改</el-link>
            <el-divider direction="vertical" />
            <el-popconfirm
              title="此操作将永久删除该文件, 是否继续?"
              @onConfirm="handleDele(row.id)"
            >
              <el-link slot="reference" type="danger">删除</el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import {
  addCategory,
  getCategory,
  editCategory,
  deleCategory,
} from "@/api/category";

export default {
  data() {
    return {
      tableData: [],
      currentPage4: 4,
      pageInfo: {
        page: 1,
        pageSize: 10,
      },
      mode: "dish",
      dialogFormVisible: false,
      form: {
        title: "添加菜品分类",
        name: "",
        sort: "",
        updateTime: "",
        type: 1,
        id: "",
      },
      action: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const {
        data: { records, total },
      } = await getCategory({ ...this.pageInfo });
      this.tableData = records;
      this.total = total;
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      this.getList();
    },
    addClass(mode) {
      if (mode === "dish") {
        this.form.title = "新增菜品分类";
        this.type = "1";
      } else {
        this.form.title = "新增套餐分类";
        this.type = "2";
      }
      this.dialogFormVisible = true;
      this.action = "add";
      this.form.name = "";
      this.form.sort = "";
    },
    handleEdit(row) {
      this.form.title = "修改分类";
      this.action = "edit";
      this.form.name = row.name;
      this.form.sort = row.sort;
      this.form.id = row.id;
      this.dialogFormVisible = true;
      this.getList();
    },
    submitForm(mode) {
      const form = this.form;
      if (this.action === "add") {
        addCategory({ name: form.name, type: this.type, sort: form.sort }).then(
          (res) => {
            this.$message.success("分类添加成功！");
          }
        );
      } else {
        editCategory({
          id: this.form.id,
          name: this.form.name,
          sort: this.form.sort,
        }).then((res) => {
          this.$message.success("分类修改成功！");
        });
      }
      this.form.name = "";
      this.form.sort = "";
      this.dialogFormVisible = false;
      this.getList();
    },
    handleDele(id) {
      deleCategory(id).then((res) => {
        this.$message.success("删除成功！");
        this.getList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  .header {
    margin-top: 20px;
    margin-left: 20px;
  }
  .body {
    margin-top: 20px;
    margin-left: 20px;
  }
  .footer {
    margin-top: 22px;
    display: flex;
    justify-content: center;
  }
}
</style>
